<template>
  <div>
    <!-- 表格部分 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="date" label="轮播名称"> </el-table-column>
      <el-table-column prop="type" label="链接类型"> </el-table-column>
      <el-table-column prop="name" label="跳转类型"> </el-table-column>
      <el-table-column prop="province" label="排序"> </el-table-column>
      <el-table-column prop="city" label="轮播图状态"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 全选反选/分页 -->
    <!-- 全选反选 -->
    <div class="footer">
      <div class="footer_left">
        <div style="margin-top: 4px">
          <el-checkbox label="全选" border size="small"></el-checkbox>
          <el-checkbox
            class="checkbox2"
            label="反选"
            border
            size="small"
          ></el-checkbox>

          <el-select v-model="value" placeholder="批量操作" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 分页 -->
      <div class="footer_right">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-sizes="[10, 200, 300, 400]"
            :page-size="100"
            layout=" prev, pager, next,sizes"
            :total="500"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},

  data() {
    return {
      tableData: [
        {
          date: "banner1-党参",
          type: "商品详情",
          name: "新窗口",
          province: "1",
          city: "正常",
        },
        {
          date: "banner1-党参",
          type: "商品详情",
          name: "新窗口",
          province: "1",
          city: "正常",
        },
        {
          date: "banner1-党参",
          type: "商品详情",
          name: "新窗口",
          province: "1",
          city: "正常",
        },
        {
          date: "banner1-党参",
          type: "商品详情",
          name: "新窗口",
          province: "1",
          city: "正常",
        },
        {
          date: "banner1-党参",
          type: "商品详情",
          name: "新窗口",
          province: "1",
          city: "正常",
        },
        {
          date: "banner1-党参",
          type: "商品详情",
          name: "新窗口",
          province: "1",
          city: "正常",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.el-table th.el-table__cell.is-leaf {
  font-weight: 900;
  background-color: #f5f5f5;
  color: 656666;
}

.el-table {
  background-color: red;
  font-size: 14px;
}
.el-table .el-button--text {
  color: #000;
}
.el-checkbox.is-bordered.el-checkbox--small {
  width: 62px;
  padding-left: 5px;
}
.footer_left .el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: -20px;
}
.footer_left .el-select {
  margin-left: 10px;
  width: 130px;
  height: 20px;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  color: #a2a1b4;
  margin: 2px 1px 0 1px;
  border: 1px solid #efefef;
  background-color: #fff;
  /* height: 30px; */
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer_right {
  margin-top: 4px;
}
</style>